<template>
  <div class="tips-detail-page">
    <block title="最新锦囊个股">
      <table>
        <thead>
          <th>名称/代码</th>
          <th>参考止损/盈价</th>
          <th class="text-right">理由</th>
        </thead>
        <tbody>
          <tr v-for="stock in stockList" :key="stock.id">
            <td>
              <p>{{stock.stockName}}</p>
              <p>{{stock.stockCode}}</p>
            </td>
            <td>
              <p>{{stock.stopLossLimit}}/</p>
              <p>{{stock.stopWinLimit}}</p>
            </td>
            <td class="text-left">
              {{stock.reason}}
            </td>
          </tr>
        </tbody>
      </table>
    </block>
    <block title="更新记录">
      <ul>
        <li v-for="content in contentList" :key="content.id" @click="$router.push(`/tips/${content.tipId}/history/${content.id}/`)">
          <div class="item-head">
            <div class="time">
              <i class="icon icon-clock"></i>
              <span>{{content.auditTime | dateFormat('YYYY/MM/DD/HH:mm')}}</span>
            </div>
            <div class="detail">
              <span>详情</span>
              <van-icon name="arrow" color="#e8302e" size="6" />
            </div>
          </div>
          <div class="item-body">
            {{content.content}}
          </div>
        </li>
      </ul>
    </block>
  </div>
</template>

<script>
import { Icon } from 'vant';
import Block from './components/Block';
import { getTipDetailApp, pageTipContentApp } from '../../api/tip';


export default {
  components: {
    Block,
    [Icon.name]: Icon
  },

  data() {
    return {
      stockList: [],
      contentList: [],
      loading: false,
      page: 1,
      size: 10
    }
  },

  mounted() {
    this.getTipDetailApp();
    this.pageTipContentApp();
    this.$bus.$on('reachBottom', this.reachBottom.bind(this));
  },

  beforeDestroy() {
    this.$bus.$off('reachBottom');
  },

  methods: {
    async getTipDetailApp() {
      const data = await getTipDetailApp(this.$route.params.id);
      this.stockList = data.list;
    },

    async pageTipContentApp() {
      const data = await pageTipContentApp(this.$route.params.id, {
        size: 10,
        offset: 0,
        tipId: this.$route.params.id,
      });
      this.contentList = data.list;
    },

    async reachBottom() {
      try {
        this.loading = true;
        ++this.page;
        const data = await pageTipContentApp(this.$route.params.id, {
          offset: (this.page - 1) * this.size,
          size: this.size,
          tipId: this.$route.params.id,
        });
        this.contentList = this.contentList.concat(data.list);
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style lang="less">
.tips-detail-page {
  table {
    width: 100%;
    text-align: center;

    thead {
      background-color: #f5f5f6;
      color: #5e6678;

      th {
        padding: 10px;
      }
    }

    tbody {
      background-color: #fff;
      color: #000;
      font-weight: bold;

      td {
        white-space: normal;
        padding: 10px;
        line-height: 1.4;
      }
    }
  }

  ul {
    li {
      color: #666;
      .item-head {
        background-color: #f5f5f6;
        display: flex;
        align-items: center;
        padding: 5px 15px;

        .time {
          display: flex;
          align-items: center;
          flex: 1;
        }

        .detail {
          display: flex;
          align-items: center;
          span {
            color: #e8302e;
            font-size: 14px;
          }
        }
      }

      .item-body {
        background-color: #fff;
        padding: 15px;
      }
    }
  }
}
</style>
